<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'
import BasicDetail from '../cbsdetail/basicdetails.vue'
import AcceptSend from '../cbsdetail/acceptsend.vue'
import {
	customerGroupendingGetmsg,
	customerGroupendingGrouplist,
	customerGroupendingUserlist,
	customerGroupendingUpdate
} from '@/api'
const emits = defineEmits(['goBack'])
const basicdetail = ref()
const acceptsend = ref()
const form = ref({})
//数据统计
const dataStatistics = ref({
	delivery_group: 0,
	delivery_groups: 0,
	send_staff: 0,
	unsent_group: 0
})
const basicDetails = ref({}) // 基本详情
const customerGroupDetails = ref([]) //客户群接收列表数据
const groupLeaderDetails = ref([]) //群主发送详情

const cancel = () => {
	emits('goBack')
}

const show = (id) => {
	console.log(id)
	id.value = id
}
defineExpose({
	show
})
const props = defineProps({
	nowDetailId: String
})
onMounted((e) => {
	console.log(e)
	customerGroupendingGetmsgFun(props.nowDetailId)
	// customerGroupendingGrouplistFun(props.nowDetailId)
	// customerGroupendingUserlistFun(props.nowDetailId)
	setTimeout(()=>{
		acceptsend.value.customerapi(props.nowDetailId)
		acceptsend.value.customerGroupendingUserlistapi(props.nowDetailId)
	
	},500)
	
})
// 详情获取基本信息
const customerGroupendingGetmsgFun = (id) => {
	customerGroupendingGetmsg({
		id: id ? id : ''
	}).then((res) => {
		console.log(res)
		if (res.status == 'success') {
			console.log(dataStatistics)
			dataStatistics.value = res.data.detail
			basicDetails.value = res.data.list
		} else {
			ElMessage.error(res.msg)
		}
	})
}
const ids = ref()
// 客户群接收详情
const customerGroupendingGrouplistFun = (id) => {
	customerGroupendingGrouplist({
		id: id ? id : ''
	}).then((res) => {
		console.log(res)
		if (res.status == 'success') {
			console.log(customerGroupDetails)
			customerGroupDetails.value = res.data
		} else {
			ElMessage.error(res.msg)
		}
	})
}
// 群主发送详情
const customerGroupendingUserlistFun = (id) => {
	customerGroupendingUserlist({
		id: id ? id : ''
	}).then((res) => {
		console.log(res)
		if (res.status == 'success') {
			ids.value=res.data[0].pid
			console.log(groupLeaderDetails)
			groupLeaderDetails.value = res.data
		} else {
			ElMessage.error(res.msg)
		}
	})
}

// 同步更新数据
const customerGroupendingUpdateFun = (id) => {
	console.log(id)
	customerGroupendingUpdate({
		id: id ? id : ''
	}).then((res) => {
		console.log(res)
		if (res.status == 'success') {
			ElMessage.success(res.msg + '，请重新打开页面查看数据')
			emits('goBack')
		} else {
			ElMessage.error(res.msg)
		}
	})
}
</script>

<template>
	<div class="app-back-tab">
		<div class="app-flex-left">
			<span class="back-box app-pointer" @click="cancel">
				<MyIcon class="app-icon" name="Back" />
				<span class="back-box-mr">返回</span>
			</span>
		</div>
	</div>
	<BasicDetail ref="basicdetail" :basicDetails="basicDetails"></BasicDetail>
	<div class="dataStyle">
		<div style="padding: 20px">数据统计</div>
		<div style="display: flex; justify-content: flex-start; padding-bottom: 20px">
			<div class="dataChild">
				<div>
					<div style="text-align: center">{{ dataStatistics.send_staff }}</div>
					<div style="color: #777879">已发送群主</div>
				</div>
				<span style="color: #ebecec">|</span>
				<div>
					<div style="text-align: center">{{ dataStatistics.delivery_group }}</div>
					<div style="color: #777879">未发送群主</div>
				</div>
			</div>
			<div class="dataChild">
				<div>
					<div style="text-align: center">{{ dataStatistics.delivery_groups }}</div>
					<div style="color: #777879">已发送群聊</div>
				</div>
				<span style="color: #ebecec">|</span>
				<div>
					<div style="text-align: center">{{ dataStatistics.unsent_group }}</div>
					<div style="color: #777879">未送达群聊</div>
				</div>
			</div>
		</div>
	</div>
	<AcceptSend
		ref="acceptsend"
		:id="ids"
		:customerGroupDetails="customerGroupDetails"
		:groupLeaderDetails="groupLeaderDetails"
		@upPageData="customerGroupendingUpdateFun(props.nowDetailId)"
	></AcceptSend>
</template>

<style scoped>
.dataStyle {
	margin: 20px;

	background-color: #ffffff;
	border-radius: 10px;
}
.dataChild {
	display: flex;
	justify-content: space-around;
	align-items: center;

	width: 340px;
	height: 120px;
	background-color: #fbfdff;
	border: 1px solid #dbedff;
	margin-left: 20px;
}
</style>
